<template>
  <div class="d-s-s diy-category">
    <!--分类不同样式展示-->
    <div class="model-container flex-1">
      <div class="img-box">
        <el-image
          @click="formData.windStyle = 1"
          :class="{ active: formData.windStyle == 1 }"
          v-if="formData.categoryStyle == 10"
          :src="category_10_1"
          fit="fill"
        ></el-image>
        <el-image
          @click="formData.windStyle = 2"
          :class="{ active: formData.windStyle == 2 }"
          v-if="formData.categoryStyle == 10"
          :src="category_10_2"
          fit="fill"
        ></el-image>
        <el-image
          @click="formData.windStyle = 3"
          :class="{ active: formData.windStyle == 3 }"
          v-if="formData.categoryStyle == 10"
          :src="category_10_3"
          fit="fill"
        ></el-image>
        <el-image
          @click="formData.windStyle = 1"
          :class="{ active: formData.windStyle == 1 }"
          v-if="formData.categoryStyle == 20"
          :src="category_20_1"
          fit="fill"
        ></el-image>
        <el-image
          @click="formData.windStyle = 2"
          :class="{ active: formData.windStyle == 2 }"
          v-if="formData.categoryStyle == 20"
          :src="category_20_2"
          fit="fill"
        ></el-image>
        <el-image
          @click="formData.windStyle = 1"
          :class="{ active: formData.windStyle == 1 }"
          v-if="formData.categoryStyle == 30"
          :src="category_30_1"
          fit="fill"
        ></el-image>
      </div>
    </div>
    <!--图片展示参数-->
    <div class="param-container">
      <div class="form-title">分类页面</div>
      <el-form size="small" :model="formData" label-width="100px">
        <div class="form-item" style="align-items: flex-start">
          <div class="form-label">分类：</div>
          <div class="flex-1">
            <el-radio-group
              v-model="formData.categoryStyle"
              @change="changeCategory"
            >
              <el-radio :label="10">一级分类</el-radio>
              <el-radio :label="20">二级分类</el-radio>
            </el-radio-group>
            <p class="gray9 f12">
              建议：一级分类(大图)尺寸建议710*300，其它均为等比图片即可，如：240*240
            </p>
          </div>
        </div>
        <div class="form-item flex-1 d-s-c ww100">
          <span class="form-label">分享标题:</span>
          <el-input v-model="formData.shareTitle"></el-input>
        </div>
      </el-form>
    </div>

    <!--提交-->
    <div class="common-button-wrapper">
      <el-button size="small" type="primary" @click="Submit()">保存</el-button>
    </div>
  </div>
</template>

<script>
import PageApi from "@/api/page.js";
import category_10_1 from "@/assets/img/category_10_1.png";
import category_10_2 from "@/assets/img/category_10_2.png";
import category_10_3 from "@/assets/img/category_10_3.png";
import category_20_1 from "@/assets/img/category_20_1.png";
import category_20_2 from "@/assets/img/category_20_2.jpg";
import category_30_1 from "@/assets/img/category_30_1.png";
export default {
  data() {
    return {
      /*表单数据对象*/
      formData: {
        categoryStyle: null,
        style: 1,
      },
      /*展示样式*/
      category_10_1,
      category_10_2,
      category_10_3,
      category_20_1,
      category_20_2,
      category_30_1,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    changeCategory(e) {
      this.formData.windStyle = 1;
      console.log(e);
    },
    /*获取数据*/
    getData() {
      let self = this;
      PageApi.getCategory({}, true)
        .then((res) => {
          self.formData = res.data;
          if (!self.formData.windStyle) {
            self.formData.windStyle = 1;
          }
        })
        .catch((error) => {
          self.loading = false;
        });
    },

    /*提交*/
    Submit() {
      let self = this;
      self.loading = true;
      let Params = self.formData;
      PageApi.postCategory(Params, true)
        .then((data) => {
          self.loading = false;
          ElMessage({
            message: "恭喜你，修改成功",
            type: "success",
          });
          self.getData();
        })
        .catch((error) => {
          self.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.diy-category {
  margin: 0;
  padding: 0;
  background: none;
}

.model-container {
  width: 300px;
  height: calc(100vh - 98px);
  margin-right: 30px;
}

.model-container .img-box .el-image {
  max-width: 362px;
  // height: 645px;
  flex: 1;
  margin-right: 60px;
  margin-bottom: 20px;
  border: 3px solid;
  border-color: rgba(0, 0, 0, 0);
  box-sizing: border-box;
}

.model-container .img-box .el-image.active {
  border-color: #409eff;
}

.model-container .img-box .el-image:last-child {
  margin-right: 0;
}

.model-container .img-box {
  // box-shadow: 0 0 16px 0 rgba(0, 0, 0, .1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding: 70px 40px 0 40px;
}

.param-container {
  width: 376px;
  height: calc(100vh - 98px);
  overflow-y: auto;
  background: #fff;
  /* border: 1px solid #cccccc; */
}

.param-container .el-form-item {
  --font-size: 14px !important;
}

.form-title {
  padding: 0 22px;
  height: 62px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  color: #666;
  font-weight: bold;
}

.key-name {
  font-size: 16px;
  color: #666;
  white-space: nowrap;
  margin-right: 30px;
}

.form-item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  padding: 10px;
  padding-right: 18px;
}

.form-label {
  width: 122px;
  margin-right: 10px;
  text-align: right;
}
</style>
